/*
 * @Description: truncate组件 浏览更多
 * @Author: kanglin
 * @Date: 2018-08-29 14:12:17
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .truncate{
        background: #ffffff;
        line-height: normal;
        line-height: 1.6;
        .content{
            position: relative;
            color: #676767;
            font-size: 22 *@rem-per-px;
            text-align: justify;
            line-height: 1.6;
            margin: 0 30*@rem-per-px;
            transition: 1s ease-in;
            &.collapse{
                height: (22*1.6*3) *@rem-per-px; // 行高1.6倍 * 3行
                overflow: hidden;
            }
        }
        .shade{
            position: absolute;
            bottom: 0*@rem-per-px;
            width: 100%;
            height: 1.6*22 *@rem-per-px;
            background-image: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
            // margin-top: (-1.6*22) *@rem-per-px;
        }
        .more{
            text-align: center;
            height: 40*@rem-per-px;
            line-height: 40*@rem-per-px;
            & > .icon{
                display: inline-block;
                line-height: 40*@rem-per-px;
                width: 22*@rem-per-px;
                height: 22*@rem-per-px;
                background: #eeeeee;
                color: #666666;
                vertical-align: -.2em;
            }
        }
    }
</style>

<template>
	<div class="truncate">
		<div
			:class="{collapse: is_collapse}"
			class="content">
			{{ text }}
			<div
                class="shade"
				v-show="is_collapse"
				>
			</div>
		</div>
        <div
            v-show="is_collapse"
            @click="showMore"
            class="more">
            查看更多
            <i class="icon"></i>
        </div>

	</div>
</template>

<script>
export default {
	name: 'Truncate',
	props: {
		text: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
            text_count: 100, // 超过是显示更多
            is_show_more: false,
        };
	},
	computed: {
		/**
         * @return {boolean}
         */
		is_collapse() {
			return this.text.length > this.text_count && !this.is_show_more;
		},
	},
	methods: {
		showMore() {
            this.is_show_more = true;
		},
	},
};
</script>
